<template>
  <div>
    <div class="van-uploader"
         v-if="!showCroper">
      <div class="van-uploader__wrapper">
        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
          </i><input type="file"
                 accept="image/*"
                 id="id"
                 @change="preview()"
                 class="van-uploader__input"></div>
      </div>
    </div>

    <div class="wrapper"
         v-if="showCroper">
      <vueCropper ref="cropper"
                  :img="img"
                  :outputSize="option.size"
                  :outputType="option.outputType"
                  :info="false"
                  :full="option.full"
                  :canMove="option.canMove"
                  :canMoveBox="option.canMoveBox"
                  :fixedBox="option.fixedBox"
                  :original="option.original"
                  :autoCrop="option.autoCrop"
                  :fixed="option.fixed"
                  :fixedNumber="option.fixedNumber"></vueCropper>
      <div class="btn">
        <a style="margin-left:20px">取消</a>
        <a style="margin-right:20px"
           @click="finish()">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'imageCroper',
  props: {
    url: {
      type: String
    },
    width: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 1
    }
  },
  data: function () {
    return {
      img: null,
      showCroper: false,
      previews: {},
      option: {
        img: '', // 裁切图片的地址
        outputSize: 0.6, // 裁剪生成图片的质量 0.1-1
        full: false, // 是否输出原图比例的截图
        outputType: 'png', // 裁剪生成图片的格式
        canMove: true, // 图片是否允许滚轮缩放
        fixedBox: false, // 固定截图框大小 不允许改变
        original: false, // 上传图片按照原始比例渲染
        canMoveBox: true, // 截图框能否拖动
        // autoCropWidth: 200,
        // autoCropHeight: 200,
        autoCrop: true, // 是否默认生成截图框
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [this.width, this.height]
      }
    }
  },
  methods: {
    finish () {
      this.$refs.cropper.getCropData((data) => {
        let formData = new window.FormData()
        formData.append('name', data)
        axios({
          url: this.url,
          headers: 'multipart/form-data',
          method: 'POST',
          data: formData,
          responseType: 'json'
        }).then(res => {
          this.$emit('getResult', res)
        })
      })
    },

    preview () {
      let files = document.getElementById('id').files[0]
      var imgDataUrl = this.getObjectURL(files)
      this.img = imgDataUrl
      this.showCroper = true
    },
    getObjectURL (file) {
      let url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      }
      return url
    }
  }
}
</script>

<style type="text/css" >
body,
html {
  height: 100%;
}
.box {
  position: relative;
  height: 100%;
}
.wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  height: calc(100% - 50px);
}
.vue-cropper {
  background: black;
  background-image: none !important;
}
.btn {
  height: 50px;
  background: #565656;
  width: 100%;
  margin: 0;
}
.btn a {
  color: white;
  font-size: 0.16rem;
  display: inline-block;
  line-height: 50px;
}
.btn a:nth-of-type(1) {
  float: left;
}
.btn a:nth-of-type(2) {
  float: right;
}
.van-uploader {
  position: relative;
  display: inline-block;
}
.van-uploader__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.van-uploader__upload {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
  background-color: #fff;
  border: 1px dashed #e5e5e5;
}
.van-uploader__upload-icon {
  color: #969799;
  font-size: 24px;
}

.van-icon {
  position: relative;
  font: 14px/1 "vant-icon";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.van-uploader__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
button,
input,
textarea {
  color: inherit;
  font: inherit;
}

input[type="file" i] {
  -webkit-appearance: initial;
  background-color: initial;
  cursor: default;
  align-items: baseline;
  color: inherit;
  text-align: start !important;
  padding: initial;
  border: initial;
}
input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 0px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}
</style>
